<template>
	<!-- 我的 -->
	<view class="z-padding-bottom white-page">
		<image src="https://mp-3ad318f6-bda9-4e5c-9962-7e028b4b8932.cdn.bspapp.com/images/resume-bg.jpg"
			style="height: 500rpx;" class="z-width-full" mode="widthFix"></image>
		<view class="z-card index-card">
			<button open-type="share" class="z-button-clear share-btn">
				<text class="tn-icon-send tn-text-xl" style="color: #007aff;"></text>
			</button>
			<view class="z-text-center">
				<image class="user-avatar z-shadow z-margin-top" :src="resumeInfo.avatar" mode=""></image>
				<view class="z-text-bold z-text-lg z-margin-top-xs z-margin-bottom-xs">
					{{resumeInfo.name}}
				</view>
				<view class="text-color2 z-text-content">
					<text class="z-margin-left-sm">{{resumeInfo.position}}</text>
				</view>
				<view class="text-color3 z-text-sm">
				</view>
			</view>
			<view style="margin: 60rpx 30rpx 0;">
				<view class="z-flex-center-between z-padding-xs" hover-class="z-hover"
					@click="toCopy(resumeInfo.wechat,'微信')">
					<view class="">
						<text class="text-color3">微信</text>
						<text class="z-margin-left-sm">{{resumeInfo.wechat}}</text>
					</view>
					<text class="tn-icon-wechat-fill tn-color-gray"></text>
				</view>
				<view class="z-flex-center-between z-padding-xs" hover-class="z-hover"
					@click="toCall(resumeInfo.phone,'手机')">
					<view class="">
						<text class="text-color3">手机</text>
						<text class="z-margin-left-sm">{{resumeInfo.phone}}</text>
					</view>
					<text class="tn-icon-phone-fill tn-color-gray"></text>
				</view>
				<view class="z-flex-center-between z-padding-xs" hover-class="z-hover"
					@click="toCopy(resumeInfo.email,'邮箱')">
					<view class="">
						<text class="text-color3">邮箱</text>
						<text class="z-margin-left-sm">{{resumeInfo.email}}</text>
					</view>
					<text class="tn-icon-email-fill tn-color-gray"></text>
				</view>
				<!-- <view class="z-flex-center-between z-padding-xs" hover-class="z-hover"
					@click="toCopy(resumeInfo.blog,'网站')">
					<view class="">
						<text class="text-color3">网站</text>
						<text class="z-margin-left-sm">{{resumeInfo.blog}}</text>
					</view>
					<text class="tn-icon-discover-planet-fill tn-color-gray"></text>
				</view> -->
				<view class="z-flex-center-between z-padding-xs" hover-class="z-hover" @click="openMap">
					<view class="">
						<text class="text-color3">地址</text>
						<text class="z-margin-left-sm">{{resumeInfo.location}}</text>
					</view>
					<text class="tn-icon-location-fill tn-color-gray"></text>
				</view>
			</view>
			<button open-type="contact" class="z-button-clear resume-btn" hover-class="z-hover">
				<text class="tn-icon-reply tn-text-xl" style="color: #ffffff;"></text>
				<text class="z-margin-left-xs">在线联系</text>
			</button>
		</view>
		<!-- <view class="z-text-center z-text-xs text-color3"> Powered By zouwq简历 © 2020~{{year}} </view> -->
		<zou-tabbar ref="tabbarRef" v-model="tabIndex"></zou-tabbar>
	</view>
</template>

<script>
	import zouTabbar from "@/components/zou-tabbar";
	export default {
		components: {
			zouTabbar
		},
		data() {
			return {
				tabIndex: 2,
				resumeInfo: {
					name: "汪晶",
					wechat: "15870006279",
					avatar: "@/static/images/resume-avatar.jpg",
					phone: "15870006279",
					position: "移动端小组长",
					// blog: "https://gitee.com/wangjingnlb/resume",
					email: "1787176521@qq.com",
					location: "杭州"
				}
			}
		},
		computed: {
			year() {
				let date = new Date();
				return date.getFullYear();
			}
		},
		onLoad() {
			uni.hideTabBar();
		},
		methods: {
			toCopy(data, title) {
				uni.setClipboardData({
					data: data,
					success: res => {
						uni.showToast({
							title: title + '已复制',
							icon: "none"
						})
					}
				})
			},
			openMap() {
				uni.openLocation({
					latitude: 24.488962,
					longitude: 118.178234,
					name: '福建·厦门',
					address: '福建·厦门-软件园二期'
				});
			},
			toCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-card {
		position: relative;
		margin: -180rpx 50rpx 30rpx;

		.share-btn {
			position: absolute;
			right: 0;
			top: 0;
			padding: 30rpx;
		}
	}

	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.resume-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 580rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 40rpx auto;
		color: $z-white-color;
		background: $z-main-color;
		border-radius: 12rpx;
	}
</style>